<template>
  <div class="box">
    <!--头部导航条-->
    <div class="nav">
      <div style="margin-left: 20px">
        <ul class="navul">
          <li @click="gohomepage"><van-icon name="wap-home" color="#FF4400" />闲呗首页</li>
          <li>
            Hi,<a>{{ profile[0].userName }}</a>
          </li>
          <li @click="tuichu">退出</li>
        </ul>
      </div>
      <div style="float: right">
        <ul class="navultow">
          <li class="mycb1">
            <a class="myxb">我的闲呗</a>
            <div class="hen"></div>
            <ul class="second">
              <li><a class="second1">我已买到的宝贝</a></li>
              <li class="second1">我已卖出的宝贝</li>
            </ul>
          </li>
          <li>
            <van-icon name="shopping-cart-o" color="#FF4400" />购物车
            <div class="hen"></div>
          </li>
          <li>
            <van-icon name="star" color="#FF4400" />收藏夹
            <div class="hen"></div>
          </li>
          <li>
            手机版
            <div class="hen"></div>
          </li>
          <li>
            联系客服
            <div class="hen"></div>
          </li>
          <li>发布闲置</li>
        </ul>
      </div>
    </div>
    <!--中间导航条-->
    <div class="box2">
      <div class="log"></div>
      <div class="abc">
        <el-steps :active="active" align-center :space="500">
          <el-step title="拍下商品"></el-step>
          <el-step title="支付金额"></el-step>
          <el-step title="确认收货"></el-step>
          <el-step title="步骤4"></el-step>
        </el-steps>
      </div>
    </div>
    <!--收货地址-->
    <div class="box3">
      <div class="shdz">选择收货地址</div>
      <div class="grxx">
        <div
          class="site"
          v-for="(item, index) in sitelist"
          :key="index"
          @click="selectadd(item, index)"
          :class="index == active1 ? 'textRed' : ''"
        >
          <div class="user">
            {{ item.province + item.city }}<span>({{ item.person }}收)</span>
          </div>
          <div class="xian"></div>
          <div class="xxdz">
            <span>{{ item.district }}</span>
            <span>{{ item.address }}</span>
            <span>{{ item.personPhone }}</span>
          </div>
        </div>
      </div>
    </div>
    <!--地址管理-->
    <div class="manage">
      <div><a href="#" class="complete">显示全部地址</a></div>
      <div><a href="#" class="gli">管理收货地址</a></div>
    </div>
    <!--驿站服务-->
    <div class="postfw">
      <div class="postwz">
        <div class="wzx"></div>
        <span>菜鸟驿站代收服务</span>
        <span class="mf">免费</span>
        <van-icon name="question-o" />
      </div>
      <div class="postx"></div>
      <div class="dsfw">
        <van-icon name="shop-collect" color="#FF4400" />收货不便,可以使用<span
          class="dsfwwz"
          >菜鸟驿站代收服务</span
        >
      </div>
    </div>
    <!--确认订单信息-->
    <div class="affirm">
      <div>
        <div class="qrxx">确认订单信息</div>
        <div class="xqnr">
          <div class="dpbb">店铺宝贝</div>
          <div class="property">商品属性</div>
          <div class="schedule">单价</div>
          <div class="num">数量</div>
          <div class="discounts">优惠方式</div>
          <div class="buggy">小计</div>
        </div>
      </div>
      <div v-for="(a, index) in goodslist" :key="index">
        <div class="shop">
          <img src="../assets/TB1CzD7SXXXXXXJaXXXXXXXXXXX-32-32.png" />
          <a style="margin-left: 9px">卖家:{{hotelArr[0].userName}}</a>
          <span class="shuidi"></span>
        </div>
        <div class="spcontent">
          <img :src="a.commodityImg" style="width: 53px" />
          <span class="text1">[国庆价]{{ a.commodityName }}</span>
          <span style="position: relative; top: 0px; left: -143px">
            <img class="img1" src="../assets/T7.png" alt="" />
            <img class="img2" src="../assets/T1B.png" alt="" />
            <img class="img3" src="../assets/xcard.png" alt="" />
            <img class="img4" src="../assets/gqkh.png" alt="" />
          </span>
          <div style="display: flex; justify-content: center">
            <div style="position: relative; top: -41px; left: -155px">
              <div>类型:默认</div>
              <div>规格:默认</div>
            </div>
            <div style="position: relative; top: -34px; left: -53px">
              {{ a.originalPrice }}
            </div>
            <div style="position: relative; top: -34px; left: 116px">
              {{ a.inventory }}
            </div>
            <div style="position: relative; top: -34px; left: 262px">
              省52.10:国庆价
              <van-icon name="chat-o" color="#FF4400" />
            </div>
            <div class="jiage">{{ a.currentPrice }}</div>
          </div>
        </div>
        <div class="liu">
          <div>
            <div>
              <van-checkbox v-model="checked" checked-color="#ee0a24"
                >开具发票</van-checkbox
              >
            </div>
            <div style="width: 500px; margin-top: 15px">
              <van-field
                v-model="message"
                rows="2"
                autosize
                label="给卖家留言:"
                type="textarea"
                maxlength="200"
                placeholder="选填,请先和商家协商一致,付款后商家可见"
                show-word-limit
              />
            </div>
          </div>
          <div>
            <div style="margin-left: 35px; font-size: 12px">
              运送方式：普通配送 快递 免邮
              <span
                style="
                  margin-left: 338px;
                  font-size: 14px;
                  font-weight: 700;
                  color: red;
                "
                >0.00</span
              >
            </div>
            <div class="jt">
              <img src="../assets/da.png" stlye="width:40px;" />
              现在下单,预计10月7日送达
            </div>
            <div style="margin-left: 46px; margin-top: 20px">
              运费险:
              <span class="yfx">运费险</span>卖家赠送,退换货可赔
              <van-icon name="chat-o" />
              <van-icon name="question-o" />
              <span
                style="
                  margin-left: 282px;
                  font-size: 14px;
                  font-weight: 700;
                  color: red;
                "
                >0.00</span
              >
            </div>
            <div style="margin-left: 435px; margin-top: 58px; font-size: 14px">
              店铺合计(含运费)
              <span class="zjia">￥{{ a.currentPrice }}</span>
            </div>
          </div>
        </div>
        <span
          style="
            font-size: 25px;
            color: red;
            display: inline-block;
            position: relative;
            left: 1135px;
            top: 64px;
          "
          >￥{{ a.currentPrice }}</span
        >
        <div style="display: flex; flex-direction: row-reverse; width: 1209px">
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">朋友代买</van-radio>
            <van-radio name="2">匿名购买</van-radio>
          </van-radio-group>
        </div>
        <div
          style="
            width: 1155px;
            height: 1px;
            background-color: darkgray;
            margin: 0 auto;
            margin-top: 3px;
          "
        ></div>
      </div>
      <div
        style="
          width: 1210px;
          display: flex;
          flex-direction: row-reverse;
          margin-top: 10px;
        "
      >
        <div class="qbuxx">
          <div
            style="
              font-weight: 700;
              width: 209px;
              text-align: end;
              height: 40px;
            "
          >
            实付到:
          </div>
          <div class="qrdz">
            <span>寄送至:</span>
            <span>{{ selectlist.province }}</span>
            <span>{{ selectlist.city }}</span>
            <span>{{ selectlist.district }}</span>
            <!-- <span>禾山</span> -->
            <span>{{ selectlist.address }}</span>
          </div>
          <div style="margin-left: 51px; margin-top: 3px">
            <span style="font-weight: 700">收货人:</span>
            <span style="margin-left: 3px"
              >{{ selectlist.person }} {{ selectlist.personPhone }}</span
            >
          </div>
        </div>
      </div>
      <div
        style="
          width: 1210px;
          height: 68px;
          display: flex;
          flex-direction: row-reverse;
        "
      >
        <div class="tjdd" @click="order">提交订单</div>
      </div>
    </div>
    <div
      style="
        margin: 0 auto;
        width: 1200px;
        height: 0.5px;
        background-color: darkgray;
      "
    ></div>
    <div class="endxx">
      <div class="endwz">
        <ul>
          <li>购物指南</li>
          <li>免费注册</li>
          <li>开通支付宝</li>
          <li>支付宝充值</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>闲呗保障</li>
          <li>发票保障</li>
          <li>售后规则</li>
          <li>物流时效保障</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>支付方式</li>
          <li>快捷支付</li>
          <li>信用卡</li>
          <li>余额宝</li>
          <li>蚂蚁花呗</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>商家服务</li>
          <li>闲呗规则</li>
          <li>商家入驻</li>
          <li>商家中心</li>
          <li>闲呗必修课</li>
          <li>喵言喵语</li>
          <li>平台服务协议</li>
        </ul>
      </div>
      <div class="endwz">
        <ul>
          <li>手机闲呗</li>
          <li><img src="../assets/ewm.png" style="width: 90px" /></li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      active: 1,
      value: 1,
      checked: false,
      radio: 1,
      active1: -1,
      userTel: sessionStorage.getItem("userTel"),
      message: 0,
      sitelist: [],
      selectlist: [],
      hotelArr:[],
      goodslist: [],
      profile: [{ userName: "" }],
      load: false,
      // loading:false,
      orderId: "",
      commodityId: window.sessionStorage.getItem("commodityId"),
    };
  },
  methods: {
    tuichu(){
            sessionStorage.removeItem('userTel')
            this.$router.go(0)
         },
    gohomepage(){
                this.$router.push('/')

            },
    //提交订单方法

    order() {
      if (this.selectlist.length == 0) {
        Toast("请选择收货地址");
      } else {
        // this.loading=true
        this.$axios
          .post(
            "/api/orderTable/payment",
            this.$qs.stringify({
              commodityId: this.commodityId,
              buyerTel: this.userTel,
              sellerTel: this.goodslist[0].userTel,
              addressid: this.selectlist.addressId,
              orderPrice: this.goodslist[0].currentPrice,
              category: this.goodslist[0].isno,
            })
          )
          .then((resp) => {
            console.log(resp.data.data1, 111);
            this.$router.push("paying");
            if (this.goodslist[0].isno == 1) {
              localStorage.setItem(
                "orderId",
                JSON.stringify({ id: resp.data.data1, type: 1 })
              );
            } else {
              localStorage.setItem(
                "orderId",
                JSON.stringify({ id: resp.data.data1, type: 2 })
              );
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //选择地址
    selectadd(item, index) {
      this.selectlist = item;
      this.active1 = index;
      console.log(this.selectlist);
      console.log(index);
    },
  },
  mounted() {
    //渲染地址
    this.$axios({
      url: "api/viewAddress/get",
      methods: "get",
      dataType: "JSON",
      params: {
        acc: this.userTel,
      },
    })
      .then((data) => {
        console.log(data.data.data);
        this.sitelist = data.data.data;
      })
      .catch((err) => {
        console.log(err);
      });

    //
    this.$axios({
      url: "api/commodityTable/minute",
      methods: "get",
      dataType: "JSON",
      params: {
        commodityId: this.commodityId,
      },
    })
      .then((data) => {
        // console.log(data.data.data,1111111)
        this.goodslist = data.data.data;
        // console.log(this.goodslist,440)
      })
      .catch((err) => {
        console.log(err);
      });
    this.$axios({
      url: "api/myprofile/get", //rul
      methods: "get", //type
      params: {
        acc: this.userTel,
      },
    })
      .then((data) => {
        this.profile = data.data.data;
        console.log(this.profile, 882);
      })
      .catch((err) => {
        console.log(err);
      });
    //拿到卖家信息
    this.$axios({
      url: "/api/userTable/get",
      methods: "get",
      params: {
        userTel: localStorage.getItem("hx220408userTel"),
      },
    })
      .then((resp) => {
        console.log(resp.data.data, 268);
        this.hotelArr = resp.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>


<style scoped>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  font-size: 12px;
}

.nav {
  height: 35px;
  /* border: 1px solid red; */
  background-color: #f5f5f5;
  box-shadow: 0px 0px 2px #2999;
  color: #756c6c;
  font-size: 10px;
  cursor: pointer;
}

.navul li:hover {
  color: #ff4400;
}

.navul li {
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
  /* text-align: center; */
}

.navultow li {
  position: relative;
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
}

.hen {
  width: 1px;
  height: 10px;
  background-color: rgb(0, 0, 0, 0.2);
  position: absolute;
  top: 11px;
  right: 24px;
  transform: rotate(20deg);
}

.second {
  width: 100px;
  height: 70px;
  box-shadow: 0px 0px 2px #2999;
  display: none;
}

.mycb1:hover .second {
  /* color:#FF4400; */
  display: block;
}

.myxb:hover {
  text-decoration: underline;
  color: #ff4400;
}

.second1:hover {
  color: #ff4400;
  text-decoration: underline;
}

.box2 {
  width: 1200px;
  height: 150px;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: space-around;
  /* line-height: 150px; */
}

.log {
  background-image: url(http://112.74.185.144:8000/files/Zqm1666747516.jpg);
  background-size: 100%;
  width: 120px;
  height: 120px;
  border-radius: 10px;
  background-repeat: no-repeat;
}

/* .el-step__title.is-finish {
    color: #409EFF;
    width: 200px !important;
} */

/* .el-step__title.is-process {
    font-weight: 700;
    color: #303133;
    width: 200px !important;
} */

/* .el-step__title.is-wait {
    color: #C0C4CC;
    width: 200px !important;
} */

.el-steps--horizontal {
  white-space: nowrap;
  margin-top: 28px;
}

.box3 {
  margin: 0;
  padding: 0;
}

.site {
  width: 236px;
  height: 105px;
  /* border: 1px solid red; */
  font-size: 11px;
  background-image: url(../assets/T1VPiBXvpeXXbjLKQ7-237-106.png);
  text-indent: 1.2em;
}

.user {
  width: 206px;
  height: 30px;
  /* border: 1px solid red; */
  line-height: 30px;

  border-bottom: 1px black;
  font-weight: 700;
}

.xian {
  background-color: darkgray;
  width: 200px;
  height: 0.5px;
  text-align: center;
}

.grxx {
  display: flex;
  justify-content: space-evenly;
}

.shdz {
  font-weight: 700;
  text-indent: 4.5em;
}

.xxdz span {
  margin-left: 5px;
}

.amend {
  color: coral;
}

.site:hover {
  background-image: url(../assets/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png);
}

.manage a {
  color: coral;
}

.manage {
  display: flex;
  justify-content: space-around;
  width: 1200px;
  height: 50px;
  /* border: 1px solid red; */
  line-height: 50px;
  font-size: 10px;
}

.complete {
  /* position: absolute; */
  /* left: 66px; */
}

.gli {
  /* position: absolute; */
  /* left: 66px; */
  /* right: 63px; */
}

.postfw {
  width: 1112px;
  height: 70px;
  /* border: 1px solid red; */
  /* background-color: rgb(0, 0, 0, 0.2); */
  box-shadow: 0px 0px 2px #2999;
  margin: 0 auto;
  font-size: 12px;
}

.postwz {
  width: 1112px;
  height: 24px;
  /* border: 1px solid blue; */
}

.mf {
  margin-left: 5px;
  background-color: red;
  color: white;
}

.postx {
  width: 973px;
  height: 1px;
  background-color: darkgray;
  margin-left: 139px;
}

.wzx {
  width: 136px;
  height: 2px;
  background-color: red;
}

.dsfw {
  width: 1200px;
  height: 40px;
  /* border: 1px solid red; */
  line-height: 40px;
  text-indent: 0.4em;
}

.dsfwwz {
  color: chocolate;
}

.qrxx {
  width: 1200px;
  height: 40px;
  font-weight: 700;
  line-height: 40px;
  text-indent: 4em;
}

.dpbb {
  width: 390px;
  text-align: center;
  border-bottom: 3px solid #b2d1ff;
}

.property {
  width: 354px;
  text-align: center;
  border-bottom: 3px solid #b2d1ff;
  margin-left: 1px;
}

.schedule {
  width: 310px;
  text-align: center;
  border-bottom: 3px solid #b2d1ff;
  margin-left: 1px;
}

.num {
  width: 310px;
  text-align: center;
  border-bottom: 3px solid #b2d1ff;
  margin-left: 1px;
}

.discounts {
  width: 354px;
  text-align: center;
  border-bottom: 3px solid #b2d1ff;
  margin-left: 1px;
}

.buggy {
  width: 354px;
  text-align: center;
  border-bottom: 3px solid #b2d1ff;
  margin-left: 1px;
}

.xqnr {
  display: flex;
  width: 1141px;
  /* height: 27px; */
  margin: 0 auto;
  margin-top: 10px;
  font-size: 12px;
}

.shop {
  width: 1137px;
  height: 38px;
  /* border: 1px solid red; */
  margin: 0 auto;
  /* margin-top: 15px; */
  font-size: 12px;
  line-height: 38px;
  border-bottom: 1px solid #80b2ff;
}

.shop img {
  width: 20px;
  position: relative;
  top: 5px;
}

.shuidi {
  background-image: url();
  width: 17px;
  height: 20px;
  display: block;
  zoom: 1;
  position: relative;
  top: -33px;
  left: 145px;
}

.spcontent {
  width: 1133px;
  /* height: 141px; */
  /* border: 1px solid red; */
  margin: 0 auto;
  margin-top: 10px;
  font-size: 12px;
}

.img1 {
  margin-left: 5px;
}

.img2 {
  margin-left: 3px;
}

.img3 {
  width: 23px;
  margin-left: 3px;
}

.img4 {
  width: 62px;
  margin-left: 3px;
}

.jiage {
  position: relative;
  left: 397px;
  top: -35px;
  font-size: 15px;
  color: red;
  font-weight: 700;
}

.liu {
  width: 1127px;
  height: 150px;
  /* border: 1px solid red; */
  position: relative;
  top: -25px;
  margin: 0 auto;
  display: flex;
  background-color: #f2f7ff;
}

.jt {
  margin-left: 96px;
}

.jt img {
  width: 40px;
}

.yfx {
  background-color: darkseagreen;
  color: white;
}

.zjia {
  font-size: 15px;
  font-weight: 700;
  color: red;
}
.qbuxx {
  width: 337px;
  height: 100px;
  border: 1px solid#FF4400;
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  flex-wrap: wrap;
}
.qrdz {
  width: 277px;
}
.qrdz span:nth-child(1) {
  font-weight: 700;
}
.qrdz span {
  margin-left: 5px;
}
.tjdd {
  width: 184px;
  height: 38px;
  background-color: #ff0036;
  font-size: 16px;
  line-height: 38px;
  text-align: center;
  color: white;
  font-weight: 700;
}
.endxx {
  width: 1210px;
  height: 130px;
  margin: 0 auto;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
}
.endwz li:nth-child(1) {
  font-size: 16px;
  font-weight: 700;
}
.el-step__title {
  width: 200px !important;
}
.abc {
  width: 600px;
}
.textRed {
  background-image: url(../assets/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png);
}
.text1 {
  display: inline-block;
  width: 131px;
  position: relative;
  margin-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  top: -21px;
  left: -4px;
}
.box {
  width: 1290px;
  margin: 0 auto;
}
</style>